<template>
  <div class="sortbox">
      <dl v-for="(item, index) in list" :key="index" class="imgbox"
        v-dragging="{ item: item, list: list, group: 'item' }">
        <dt><img :src="item.url" alt="" srcset=""></dt>
        <dd>{{item.title}}</dd>
      </dl>
  </div>
</template>

<script>
import Vue from 'vue'
import VueDND from 'awe-dnd'

Vue.use(VueDND)

export default {
  name: '',
  mounted () {
    this.$dragging.$on('dragged', ({ value }) => {
      console.log(value.item)
      console.log(value.list)
      console.log(value.otherData)
    })
    this.$dragging.$on('dragend', (res) => {
      console.log(res);
    })
  },
  data () {
    return {
      list: [
        {
          title: 'aaa',
          url: "http://fed.rtmap.com/crm/images/aaa.png"
        },
        {
          title: 'bbb',
          url: "http://fed.rtmap.com/crm/images/bbb.png"
        },
        {
          title: 'ccc',
          url: "http://fed.rtmap.com/crm/images/ccc.png"
        },
        {
          title: 'ddd',
          url: "http://fed.rtmap.com/crm/images/eee.png"
        },
        {
          title: 'fff',
          url: "http://fed.rtmap.com/crm/images/fff.png"
        },
        {
          title: 'eee',
          url: "http://fed.rtmap.com/crm/images/eee.png"
        },
      ]
    }
  },

  methods: {}
}

</script>
<style lang='css' scoped>
.sortbox{
  display: flex;
}
.imgbox{
  width: 100px;
  height: 120px;
}
.imgbox img{
  width: 100px;
  height: 100px;
}
</style>

